<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
  <title>使用FLEX布局实现瀑布流超级简单</title>
</head>
<body>
  <style>
    body{ background:#f1f1f1; }
    *{ margin:0px; padding:0px; box-sizing: border-box; }
    /***VUE避免数据加载错乱***/
    [v-lock]{ display:none; }
    /***瀑布流***/
    .waterfall { display: flex;	padding-right:10px;}		
    .waterfall .col{ display: flex;flex:1;	flex-direction: column; padding-left:10px;}
    .waterfall .item { margin-top:10px; background:#fff; border-radius:10px; overflow: hidden; }
    .waterfall .item img{display:block; width:100%;}
    .waterfall .item h3{ padding:12px; font-size:14px;}
  </style>
  <div id="app" v-lock>
    <!--瀑布流-->
    <div class="waterfall">
      <!--左第一排-->
      <div class="col">
        <div class="item" v-for="(item,index) in list" v-if="(index+1)%2!=0" :key="index">
          <img :src="item.img" alt="">
          <h3>{{item.name}}</h3>
        </div>
      </div>
       <!--第二排-->
      <div class="col">
        <div class="item" v-for="(item,index) in list" v-if="(index+1)%2==0" :key="index">
          <img :src="item.img" alt="">
          <h3>{{item.name}}</h3>
        </div>
      </div>
    </div>
  </div>

  <script src="js/vue.min.js"></script>
  <script>
    new Vue({
      el:'#app',
      data:{
        list:[
          {img:'img/1.png', name:'最是人间抚人心'},
          {img:'img/2.png', name:'晴空万里愿您山河无恙'},
          {img:'img/3.png', name:'星光灿烂明天依然辉煌'},
          {img:'img/4.png', name:'人生在世不过三万天每一天都充满阳光'},
          {img:'img/1.png', name:'愿你三冬暖愿您六月寒我的冻感冒了哼!'},
          {img:'img/3.png', name:'罗刹国向东两万六千里'},
          {img:'img/2.png', name:'如果归来您是王者傲视天下谁与争峰'},
          {img:'img/1.png', name:'最是人间抚人心'},
          {img:'img/2.png', name:'晴空万里愿您山河无恙'},
          {img:'img/3.png', name:'星光灿烂明天依然辉煌'},
          {img:'img/4.png', name:'人生在世不过三万天每一天都充满阳光'},
          {img:'img/1.png', name:'愿你三冬暖愿您六月寒我的冻感冒了哼!'},
          {img:'img/3.png', name:'罗刹国向东两万六千里'},
          {img:'img/2.png', name:'如果归来您是王者傲视天下谁与争峰'},
        ]
      }
    })
  </script>


</body>
</html>